<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket</title>
    <style>
      .container {
        box-sizing: border-box;
        margin: 15px auto;
        padding: 15px;
        font-size: 18px;
        border: 1px dashed #000;
      }

      .title {
        margin: 0;
        padding-bottom: 15px;
        height: 64px;
        line-height: 64px;
        font-weight: 100;
        text-align: center;
        letter-spacing: 12px;
        border-bottom: 1px solid #000;
        text-transform: uppercase;
      }

      .message-wrap {
        height: 60vh;
        overflow-y: auto;
      }

      .message {
        display: flex;
        padding: 15px;
        line-height: 1.6;
      }

      .message .label {
        flex-shrink: 0;
        width: 50px;
        color: #333;
      }

      .message .value {
        flex: 1;
        color: #bbb;
      }

      .message ~ .message {
        border-top: 1px dashed #bbb;
      }

      .message.self .label {
        order: 1;
        text-align: right;
      }

      .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 64px;
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: -15px;
        background-color: greenyellow;
      }

      .footer .input {
        box-sizing: border-box;
        padding: 0 15px;
        width: 360px;
        height: 36px;
        outline: none;
        border: 1px solid #000;
        border-radius: 5px;
      }

      .footer .button {
        margin-left: 15px;
        padding: 0 15px;
        height: 36px;
        font-weight: bold;
      }

      .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
      }

      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app" class="container" v-cloak>
      <p>{{nickName}}</p>
      <h1 class="title">Web<span style="font-weight: 700">socket</span></h1>

      <div ref="myWrap" class="message-wrap">
        <div
          class="message"
          :class="{'self': item.isSelf}"
          v-for="(item, index) in messages"
          :key="index"
        >
          <div class="label">{{ item.nickName }}</div>
          <div class="value">{{ item.text }}</div>
        </div>
      </div>

      <div class="footer">
        <input
          ref="myInput"
          class="input"
          type="text"
          v-model="value"
          @keyup.enter="onSend"
        />
        <button class="button" @click="onSend">Send</button>
      </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="./socket.io.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            /**
             * { nickName: string; text: string, isSelf: true }[]
             */
            messages: [],

            value: "",

            nickName: "",
          };
        },

        methods: {
          handleScrollBottom() {
            console.log(this.$refs.myWrap.scrollTop, "scrollTop");
            console.log(this.$refs.myWrap.scrollHeight, "scrollHeight");
            this.$nextTick(() => {
              // 操作滚动条置底
              this.$refs.myWrap.scrollTop = this.$refs.myWrap.scrollHeight;
            });
          },

          onSend() {
            // 1. 非空校验
            if (!this.value) return;
            // 2. 向服务端发消息
            this.socket.emit("message", this.value);
            // 3. 自行往 messages 中添加一条数据
            this.messages.push({
              nickName: this.nickName,
              text: this.value,
              isSelf: true,
            });
            // 4. 清空input
            this.value = "";
            // 5. 让 input 获取焦点
            this.$refs.myInput.focus();
            // 6. 调用置地
            this.handleScrollBottom();
          },
        },

        mounted() {
          // 建立链接
          this.socket = io("http://10.36.133.107:3000");
          // this.socket = io("http://127.0.0.1:3000");

          const name = window.prompt("请输入你的昵称");
          if (!name) return;
          this.nickName = name;

          // 立刻发出一个 init 事件，告诉服务端我的名字
          this.socket.emit("init", this.nickName);

          // 监听服务端发来的消息
          this.socket.on("message", (data) => {
            console.log("message", data);
            // 将消息写入到 messages
            this.messages.push(data);

            this.handleScrollBottom();
          });
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
